{% extends 'base/base_photo.html' %}
{% load blog_tags %}
{% load staticfiles %}

{% block header %}
    <title>第一版相册 | {{ SITE_DESC }}</title>
    <meta name="keywords" content="{{ SITE_KEYWORD }}"/>
    <meta property="og:type" content="blog"/>
    <meta property="og:title" content="{{ SITE_NAME }}"/>
    <meta property="og:description" content="{{ SITE_DESC }}"/>
    <meta property="og:site_name" content="{{ SITE_NAME }}"/>
{% endblock %}

{% block compress_css %}
    <link rel="stylesheet" href="{% static 'photo/css/photo_show.css' %}">
{% endblock %}

{% block content %}
    <div id="primary" class="site-content">
        <div id="content" role="main">
            <header class="archive-header">
                <p class="archive-title">第一版相册, 都是固定宽高了的</p>
            </header>

            <div class="entry-content">
                <!-- 主内容页面 -->
                <div class="card">
                    {% for photo in photo_list %}
                        <div style="padding: .5rem; width: 30%; float: left">
                            <div>
                                <a href="javascript:void(0)" data-magnify="gallery"
                                   data-caption="{{ photo.title }}"
                                   data-src="{{ MEDIA_URL }}{{ photo.image }}">
                                    <img style="height: 150px; width: 100%" title="{{ photo.desc }}" class="img-thumb"
                                         alt=""
                                         src="{{ MEDIA_URL }}{{ photo.image }}">
                                </a>
                            </div>
                            <div class="k-iconbox__title" style="text-align: center">
                                <span>{{ photo.title }}</span>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div id="overlay" class="overlay"></div>

{% endblock %}

{% block sidebar %}
    {% inclusion_sidebar_tag %}
{% endblock %}

{% block compress_js %}
    <script type="text/javascript" src="{% static 'photo/js/jqueryrotate.js' %}"></script>
    <script type="text/javascript" src="{% static 'photo/js/photo_show.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            $('[data-magnify]').Magnify({
                keyboard: true,
                draggable: false,  // 弹出框不可移动
                movable: true,
                beforeOpen: function (obj, data) {
                    //console.log('beforeOpen')
                },
                opened: function (obj, data) {
                    //console.log('opened')
                },
                opened2: function (obj, data) {
                    //console.log('opened')
                },
                beforeClose: function (obj, data) {
                    //console.log('beforeClose')
                },
                closed: function (obj, data) {
                    //console.log('closed')
                },
                beforeChange: function (obj, data) {
                    //console.log('beforeChange')
                },
                changed: function (obj, data) {
                    //console.log('changed')
                }
            });
        });
    </script>
{% endblock %}
